<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            margin: 50px;
        }
        .container{
            width: 100px;
            height: 2000px;
            background: blue;
        }
    </style>
</head>
<body>
    
    <!-- <button>按钮</button> -->
    <div class="box"></div>
    <div class="container"></div>
    <script>
        // 1.BOM 2.DOM 3.event : 事件
        // 事件 ： event ；三个内容 1.事件源 2.事件类型 3. 事件函数；4.修饰符（可有可无） 
        // var btn = document.querySelector("button");
        // // 1.btn 是事件源 2.事件类型click 3.事件函数 (事件函数会事件触发之后自动执行) 4.修饰符 on
        // var fn = function(){
        //     console.log("fn")
        // }
        // btn.onclick = fn;

        // 一、事件里的this 会指向事件源 ；
        // var btn = document.querySelector("button");
        // btn.onclick = function(){
        //     console.log(this);
        //     setTimeout(function(){
        //         console.log(this);
        //     }, 1000);
        // }

        // 二、事件函数不能重复绑定；
        // var btn = document.querySelector("button");
        // btn.onclick = function(){
        //     console.log("fn1");
        // }
        // btn.onclick = function(){
        //     console.log("fn2");
        // }
        // var a = 10;
        // var a = 20;
        

        // 三、事件对象，事件触发的时候 js会提供一内置对象来描述事件的相关信息；
        // 比如：事件类型 ，点击坐标 ，按键类型....
    //    var ele =  document.querySelector(".box");
    //    ele.onclick = function(e){
    //        console.log("点击了box方块",e);
    //    }

    //    1.事件类型 type  2.button 0.鼠标左键 1.滚轮 2.鼠标右键 
    // 注意： 事件对象里的几个坐标 
    // 一、相对于自身的x 和 y 坐标offsetX/offsetY
    // 触发事件的时候 offsetX：鼠标相对于事件源的x坐标
    //               offsetY：鼠标相对于事件源的Y坐标
    // var ele =  document.querySelector(".box");
    // ele.onclick = function(e){
    //       console.log(e.offsetX);
    //     //   console.log(e.offsetY);
       


    // 二、相对于浏览器的x和y的坐标
    // clientX: 相对于浏览器的左边的坐标
    // clientY：相对于浏览器的上边的坐标
    // var ele =  document.querySelector(".box");
    // ele.onclick = function(e){
    //     //   console.log(e.offsetX);
    //     console.log(e.clientX);
    //     console.log(e.clientY);
    //    }

    // 三 、相对于页面的 x 和y的坐标
    // pageX： 相对于页面的左边的距离
    // pageY：相对于页面的上边的距离坐标；
    var ele =  document.querySelector(".box");
    ele.onclick = function(e){
        //   console.log(e.offsetX);
        console.log("相对浏览器",e.clientY);
        console.log("相对于页面",e.pageY);
       }
       



    //    总结 ：一、事件分三个部分 ：1.事件源 2.事件类型 3.事件函数；
    // 二、事件对象
        // 几个坐标 ： 1.相对于自身的x和y  offsetX 、offsetY
                // 2 。 相对于浏览器的x和y  clientX、clientY
                // 3.相对于页面的x 和y pageX 和pageY
                // 4.offsetWidth 和offsetHeight ： 自身+内边距+边框
                // 5.clientWidth和clientHeight ： 自身+内边距
                // 6.offsetLeft 和offsetTop ：1.没有定位相对于页面的左边偏移量和上边
                                            // 2.有定位 相对于定位父级的左偏移量和上边偏移量
                // 7.clientLeft 和clientTop ：边框的宽度；
                // drag
    </script>
</body>
</html>